<template>
	<div id="app">
		<h3>案例：折叠面板</h3>
		<Pannel></Pannel>
    <PannelG></PannelG>
     
     <!-- 组件名tap栏目补全，可以在设置搜索triggerExpansionOnTab -->

		<!-- 使用组件 -->
		<!-- 1. 单标签：<组件名 /> -->
    <Pannel />
    <!-- 小写加-形式 -->
    <Pannel-g />
		<!-- 2. 双标签 -->
	<Pannel></Pannel>
		<!-- 3. 小写标签 加 - 连接 -->
	</div>
</template>

<script>
//导入需要使用的组件:import 组件名 from 地址
import Pannel from './components/Pannel.vue'
	export default {

	components:{
    //组件名：导入进来的组件对象
    Pannel:Pannel
  }
	}
</script>

<style lang="less">
	body {
		background-color: #ccc;

		#app {
			width: 400px;
			margin: 20px auto;
			background-color: #fff;
			border: 4px solid blueviolet;
			border-radius: 1em;
			box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
			padding: 1em 2em 2em;

			h3 {
				text-align: center;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #ccc;
				padding: 0 1em;
			}

			.title h4 {
				line-height: 2;
				margin: 0;
			}

			.container {
				border: 1px solid #ccc;
				padding: 0 1em;
			}

			.btn {
				/* 鼠标改成手的形状 */
				cursor: pointer;
			}
		}
	}
</style>
